<template>
	<view class="page">
		<image :src="'/static/my/share.png'" mode=""></image>
		<u-sticky bgColor="#bce3d7">
			<view :style="{ padding: '0 20rpx', margin: '20rpx 0' }">
				<u-input v-model="search" placeholder="搜索你感兴趣的内容" suffix-icon="search" clearable
					suffix-icon-style="color: #909399" shape="circle" border="none" font-size="13px"
					@confirm="handleSearch" :custom-style="{
		      background: '#fff',
		      padding: '6px 12px',
		      boxShadow: '0 0 20rpx rgba(186, 186, 186, 0.1)',
		    }" />
			</view>
			<view class="year" @click="show = true" v-if="isShow">
				<view class="left" style="color: #000;">
					{{value || '时间选择'}}
				</view>
				<view class="right">
					<u-icon class="icon" name="arrow-down" color="#BABABA" size="12"></u-icon>
				</view>
			</view>
		</u-sticky>

		<view class="body">
			<consultBody :home='false' :list="dataList" :url="1" type="2" />
			<u-loadmore :status="status" />
		</view>
		<u-datetime-picker :show="show" mode="year-month" @confirm="chooseYear" v-model="today" closeOnClickOverlay @close="show = false"
			 @cancel="clearDate" cancelText='清空'>
		</u-datetime-picker>
	</view>
</template>
<script>
	import consultBody from '@/pages/index/consultBody.vue';
	import {
		policyList
	} from "@/request/homeApi.js";

	export default {
		components: {
			consultBody
		},
		data() {
			return {
				today:Number(new Date()),
				value: '',
				show: false,
				page: 1,
				last_page: 1,
				search: '',
				isShow: true,
				typeList: [],
				dataList: [],
				status: "nomore", // 加载状态
			};
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.getList()
			}
		},
		onLoad(e) {
			this.getList();
		},
		watch: {
			search(val) {
				console.log(val,'val')
				if (!val) {
					this.page = 1;
					this.dataList = []
					this.getList();
					this.isShow = true
				}
			}
		},
		methods: {
			clearDate(){
				this.value = ''
				this.show = false
				this.dataList = []
				this.page = 1
				this.getList()
			},
			chooseYear(e) {
				this.value = this.$TimeFormat(e.value, 'yyyy-mm')
				this.show = false
				this.dataList = []
				this.page = 1
				this.getList()
			},
			// 跳转
			Jump(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 获取列表
			getList() {
				this.status = "loading";
				let that = this
				policyList({
					page: that.page,
					limit: 10,
					title: that.search,
					is_top: '',
					time:that.value
				}).then(res => {
					that.dataList = that.dataList.concat(res.data.list)
					that.last_page = Math.ceil(res.data.count / res.data.list.length)
					res.data.count == 0 ? that.status = 'nomore' : that.status = ''
				})
			},

			handleSearch(e) {
				this.search = e ? e : ''
				this.isShow = false
				this.page = 1;
				this.dataList = []
				this.getList();
			},

			// 查看详情
			handleDetail(id) {
				uni.navigateTo({
					url: `/pages/home/festivalDetail?id=${id}&type=2`,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;

		.u-sticky {
			background-color: #bce3d7;
		}

		image {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			z-index: -1;
		}

		.year {
			margin: 20rpx;
			font-size: 28rpx;
			height: 60rpx;
			display: flex;

			.left {
				width: 17%;
				height: 40rpx;
				line-height: 40rpx;
				margin: 8rpx 0;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0px;
			}

			.right {
				width: 20%;
				height: 54rpx;
				line-height: 54rpx;
				padding: 0 20rpx 0 30rpx;
				display: flex;
				font-size: 26rpx;
				justify-content: space-between;
			}
		}

		.body {
			padding: 0rpx 20rpx;

			.f-bottom {
				font-weight: 600;
				font-size: 28rpx;
				color: $active-color;
				margin-left: 20rpx;

				text:nth-child(2) {
					font-size: 24rpx;
				}

				text:last-child {
					font-size: 40rpx;
				}
			}
		}

		.tabBox {
			display: flex;
			justify-content: space-between;
			background-color: #bce3d7;
			width: 100%;
			padding: 10rpx 20rpx 0;
			box-sizing: border-box;
			text-align: left;
			font-size: 30rpx;
			overflow-x: auto;

			/deep/.u-scroll-list {
				padding-bottom: 0 !important;
			}

			.leftIcon {
				width: 100%;
				padding: 0 26rpx;
				box-sizing: border-box;
				height: 3rpx;
				margin: 14rpx auto;
			}

			.navItem {
				padding: 0 26rpx;
				text-align: center !important;
			}
		}
	}
</style>
